---
permalink: "/ui/ui-elements/view/keyboard-avoiding-view/index.xml"
tags: "UI/UI Elements/View"
hv_title: "Keyboard Avoiding View"
hv_button_behavior: "back"
---
{% extends 'templates/base.xml.njk' %}
{% from 'macros/description/index.xml.njk' import description %}

{% block styles %}
  <style id="form-group" flex="0" flexGrow="1" margin="24"/>
  <style id="label" borderColor="#4E4D4D" fontSize="16" fontWeight="bold" lineHeight="24" marginBottom="8"/>
  <style
    id="input"
    borderBottomColor="#E1E1E1"
    borderBottomWidth="1"
    borderColor="#4E4D4D"
    fontSize="16"
    fontWeight="normal"
    paddingBottom="8"
    paddingTop="8"
    marginBottom="24"/>
  <style id="footer-style" backgroundColor="#63CB76" width="100%" padding="24"/>
  <style id="footer-description" color="white" fontSize="24" fontWeight="bold" textAlign="center"/>
{% endblock %}

{% block container %}
  {% call description() -%}
    View with text inputs that open the keyboard. Keyboard awareness is applied on both the scrollable 'Form' view and the
    non-scrollable 'footer-style' view
  {%- endcall %}
  <view id="form" style="form-group" scroll="true">
    <text style="label">Input field 1</text>
    <text-field placeholder="First name" placeholderTextColor="#8D9494" name="text" style="input"/>
    <text style="label">Input field 2</text>
    <text-field placeholder="Last name" placeholderTextColor="#8D9494" name="text" style="input"/>
    <text style="label">Input field 3</text>
    <text-field placeholder="Address" placeholderTextColor="#8D9494" name="text" style="input"/>
  </view>
  <view id="footer" avoid-keyboard="true">
    <view style="footer-style">
      <text style="footer-description">Keyboard Avoiding View</text>
    </view>
  </view>
{% endblock %}
